<template>
  <div class="quality-box">
    <div class="quality-content">
      <div class="title">环保质量</div>
      <!-- echarts图例展示 -->
      <div id="main-quality"></div>
      <!-- 下拉框 -->
      <!-- <div class="select">
        <select class="form-control">
          <option value="2" selected>中山公园</option>
        </select>
      </div> -->
      <!-- 分类展示 -->
      <div class="quality-legend">
        <div v-for="(item, i) in qualityList" :key="i"><span :style="{background: item.color}"></span><i>{{ item.name}}</i><b>{{item.num}}</b></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'eQuality',
  data () {
    return {
      qualityData: [250, 150, 56, 4, 150, 20], // 获取到的环保质量渲染echarts的数据
      qualityList: [
        { name: 'Pm2.5', num: 35, color: '#BAD87D' },
        { name: 'Pm10', num: 0.05, color: '#BD10E0' },
        { name: '湿度', num: 43, color: '#F6511D' },
        { name: '噪音', num: 32, color: '#50E3C2' },
        { name: '氨氮', num: '2', color: '#8B572A' },
        { name: '温度', num: '23', color: '#4A90E2' }
      ], // 获取到的环保质量分类列表
      chart: ''
    }
  },
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    option: {
      type: Object,
      default () {
        return {
          // title: {
          //   text: '环保质量',
          //   textStyle: {
          //     color: '#fff',
          //     fontSize: 12
          //   },
          // },
          legend: {
            bottom: 5,
            data: ['北京'],
            itemGap: 20,
            textStyle: {
              color: '#fff',
              fontSize: 12
            },
            selectedMode: 'single'
          },
          radar: {
            center: ['45%', '40%'], // 控制雷达图图例位置
            indicator: [
              { name: 'Pm2.5', max: 300 },
              { name: 'Pm10', max: 250 },
              { name: '湿度', max: 300 },
              { name: '噪音', max: 5 },
              { name: '氨氮', max: 200 },
              { name: '温度', max: 100 }
            ],
            radius: 60, // 控制雷达图图例大小
            splitNumber: 3,
            name: {
              textStyle: {
                color: '#9FACC3'
              }
            },
            splitLine: {
              lineStyle: {
                color: [
                  '#50E3C2'
                ].reverse()
              }
            },
            splitArea: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#50E3C2'
              }
            }
          },
          series: [
            {
              type: 'radar',
              lineStyle: {
                normal: {
                  width: 1,
                  opacity: 0.5
                }
              },
              data: [
                {
                  value: []
                }
              ],
              symbol: 'circle',
              symbolSize: 6,
              itemStyle: {
                normal: {
                  color: '#50E3C2'
                }
              },
              areaStyle: {
                normal: {
                  opacity: 0.7,
                  backgroundColor: '#50E3C2'
                }
              }
            }

          ]
        }
      }
    }
  },
  mounted () {
    this.getChart()
  },
  methods: {
    // 初始化图例
    getChart () {
      var temp = this.option
      temp.series[0].data[0].value = this.qualityData
      this.chart = this.$echarts.init(document.getElementById('main-quality'))
      this.chart.setOption(this.option)
    }
  }
}
</script>

<style>
  .quality-box {
    width: 100%;
    margin-bottom: 10px;
  }

  .quality-content {
    width: 100%;
    background: rgba(43, 54, 72, 0.95);
    position: relative;
    padding: 13px;
    box-sizing: border-box;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }

  .quality-content .title{
    position: relative;
    top:8px;
    left:10px;
    font-size: 12px;
    font-weight: 600;
    color:#FFFFFF;
  }

  .quality-content .select {
    width: 100px;
    position: absolute;
    top: 4%;
    left: 53%;
    right: 10%;
  }

  .form-control {
    width: 100px;
    height: 30px;
    text-indent: 10px;
    background: rgba(0, 0, 0, 0.20);
    border-radius: 4px;
    border: none;
    font-size: 12px;
    color: #9FACC3;
  }

  #main-quality {
    width: 100%;
    height: 320px;
  }

  .quality-legend {
    position: absolute;
    top: 270px;
    width: 100%;
    left: 15px;
    height: 70px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .quality-legend i {
    font-style: normal;
    /*width: 100px;*/
    color: #9FACC3;
    font-size: 12px;
  }

  .quality-legend b {
    float: right;
    font-size: 14px;
    color: #50E3C2;
    font-weight: normal;
  }

  .quality-legend span {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    width: 8px;
    height: 8px;
    display: inline-block;
    /*float: left;*/
    margin-right: 9px;
  }

  .quality-legend div {
    width: 34%;
    line-height: 10px;
    color: #fff;
    margin-right: 30px;
  }
</style>
